<template>
  <div>
    <h2>我是 childa</h2>

    <ul>
      <li v-for="item in $store.state.list" :key="item"> {{item}} </li>
    </ul>

    <ol>
      <li v-for="item in $store.getters.maxList" :key="item"> {{item}} </li>
    </ol>

    <ol>
      <li v-for="item in maxList" :key="item"> {{item}} </li>
    </ol>

    <hr>
    <button @click="changeCountOne">1. 原始调用</button>
    <button @click="changeCountNum">2. 原始调用传参8</button>
    <button @click="changeCountOne2">3. 辅助函数</button>
    <button @click="addCountOne">4. 辅助函数</button>
    <button @click="changeCountNum2">5. 辅助函数传参100</button>

    <br />
    <button @click="changeAsyncCountOne">1. 异步原始调用</button>
    <button @click="changeAsyncCountNum">2. 异步原始调用参数7</button>
    <button @click="addAsyncCountNum(20)">3. 异步辅助函数参数20</button>

  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'

export default {
  methods: {
		...mapMutations(['addCountOne', 'addCountNum']),
    ...mapActions(['addAsyncCountNum']),
    changeCountOne() {
      this.$store.commit('addCountOne')
    },
		changeCountOne2() {
			console.log(123)
			this.addCountOne()
		},
    changeCountNum() {
      this.$store.commit('addCountNum', 8)
    },
		changeCountNum2() {
			this.addCountNum(100)
		},
    changeAsyncCountOne() {
      this.$store.dispatch('addAsyncCountOne')
    },
    changeAsyncCountNum() {
      this.$store.dispatch('addAsyncCountNum', 7)
    }
  },
  computed: {
    ...mapGetters(['maxList'])
  }
}
</script>

<style>

</style>